<fieldset class="layui-elem-field layui-field-title">
  <legend>添加分类</legend>
</fieldset>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">分类名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请填写分类名称"  class="layui-input"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">父分类</label>
		<div class="layui-input-inline">
			<select name ="parent">
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<input type="hidden" name="picture"/>
		<label class="layui-form-label">分类图片</label>
		<div class="layui-input-inline">
			<!-- 图片插件 -->
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test1">上传图片</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width:92px;height: 92px;">
			    <p id="demoText"></p>
			  </div>
			  <div style="width: 95px;">
			    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
			      <div class="layui-progress-bar" lay-percent=""></div>
			    </div>
			  </div>
			</div>   
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" lay-submit lay-filter="add">添加分类</button>
		</div>
	</div>
	

</form>

<script type="text/javascript">
	layui.use(['element','upload','form'],function(){
		var form = layui.form;
		var element = layui.element;
		var upload = layui.upload;
		//获取Token,在请求时  添加到请求头中
		var token = getCookie("token");
		
		//获取一级分类
		$.ajax({
			headers:{token: token},//在请求时  添加到请求头中0
			url:'http://127.0.0.1:8888/api/goodsSorts',
			type:'get',
			data:{},
			dataType:'json',
			success:function(data){
				if(data.status == 200){
				 var html ="<option value=''>请选择父分类</option>";
				 $.each(data.data.list,function(index,item){
					html += '<option value="'+item.id+'">'+item.name+'</option>';
				 });
				$("select[name='parent']").html(html);
				form.render();
				}else{
					layer.alert(data.msg,function(){
						window.location.href="login.html";
					});
					
				}
			},error:function(){
				
				
			}
			
		});
		
		//常规使用 - 普通图片上传
		  var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: 'http://127.0.0.1:8888/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#demo1').attr('src', result); //图片链接（base64）
		      });
		      
		      element.progress('demo', '0%'); //进度条复位
		      layer.msg('上传中', {icon: 16, time: 0});
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功的一些操作
			  $("input[name='picture']").val(res.data);
		      //……0
		      $('#demoText').html(''); //置空上传失败的状态
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		    //进度条
		    ,progress: function(n, elem, e){
		      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
		      if(n == 100){
		        layer.msg('上传完毕', {icon: 1});
		      }
		    }
		  }); 
		  
		  //表单提交
		  form.on('submit(add)',function(data){
		  	//Ajax 添加
		  	$.ajax({
		  		url:'http://127.0.0.1:8888/api/goodsSorts',
		  		type:'post',
		  		data:JSON.stringify(data.field),//转化成json
		  		contentType:'application/json; charset=UTF-8',
		  		dataType:'json',
		  		success:function(data){
		  			if(data.status==201){
		  				layer.alert("添加成功",function(index){
		  					layer.close(index);
		  					//跳转页面，
		  					gotoUrl("sort/list.html");
		  				});
		  			}else{
		  				//添加失败
		  				layer.msg(data.msg);
		  			}
		  			
		  		},error:function(){
		  			
		  			
		  		}
		  		
		  	});
		  	return false;//阻止表单的提交
		  
		  });
		
	});
</script>
